<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>review128925-2.css</title>
<meta name="generator" content="KF5::SyntaxHighlighting (CSS)"/>
</head><body style="color:#1f1c1b"><pre>
<span style="color:#898887;">/*</span>
<span style="color:#898887;"> * CSS Syntax Highlight Sample File (Complex)</span>
<span style="color:#898887;"> *</span>
<span style="color:#898887;"> * This file contains complex CSS syntax that can test unexpected situations.</span>
<span style="color:#898887;"> *</span>
<span style="color:#898887;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#898887;"> * @date    2016-09-16</span>
<span style="color:#898887;"> */</span>


<span style="color:#898887;">/* Comments with special content */</span>

<span style="color:#898887;">/*</span>
<span style="color:#898887;"> * .class-selector #id &quot;string&quot; 'comment' // comment {} [] ()  /* comment</span>
<span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> DEBUG</span>
<span style="color:#898887;"> * body {</span>
<span style="color:#898887;"> *    margin: 0 !important;</span>
<span style="color:#898887;"> * }</span>
<span style="color:#898887;"> */</span>

<span style="color:#898887;">/* Comments in special positions */</span>

header<span style="color:#898887;">/* comment here */</span><span style="color:#644a9b;">.active</span> <span style="color:#898887;">/* comment here */</span> {
    <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">color</span> : <span style="color:#898887;">/* comment here */</span> <span style="color:#aa5500;">blue</span><span style="color:#898887;">/* comment here */</span>;
    <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#898887;">/* comment here */</span>,
        <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, <span style="color:#898887;">/* comment here */</span>
        <span style="color:#b08000;">sans-serif</span><span style="color:#898887;">/* comment here */</span>;
}

<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> <span style="color:#898887;">/* comment here */</span>) <span style="color:#898887;">/* comment here */</span> {<span style="color:#898887;">/* comment here */</span>}


<span style="color:#898887;">/* Strings with special content */</span>

<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;{} $variable /* comment */&quot;</span><span style="color:#644a9b;">)</span>;


<span style="color:#898887;">/* Without extra breaklines and spaces */</span>

pre<span style="color:#644a9b;">.primary</span><span style="color:#b08000;font-style:italic;">:hover</span><span style="color:#644a9b;">.large</span><span style="color:#b08000;font-style:italic;">:nth-child(2n-1)</span>{<span style="font-weight:bold;">font-size</span>:<span style="color:#b08000;">17</span><span style="color:#0057ae;">px</span>;<span style="font-weight:bold;">font-family</span>:<span style="color:#bf0303;">&quot;Noto Sans&quot;</span>;<span style="font-weight:bold;">-webkit-box-shadow</span>:<span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0.3</span><span style="color:#644a9b;">)</span>}


<span style="color:#898887;">/* With unnecessary breaklines and spaces */</span>

blockquote <span style="color:#644a9b;">.ref</span>
    {
             <span style="font-weight:bold;">flex</span> : <span style="color:#b08000;">0</span> <span style="color:#b08000;">1</span> <span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span>;
        <span style="font-weight:bold;">flex-wrap</span> : wrap;
    }

<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) {
  <span style="color:#644a9b;">.sidebar</span> {
    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span>; } }


<span style="color:#898887;">/* Special selectors: HTML5 allows user defined tags */</span>

header {
    flex {
        <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>;
    }
}
</pre></body></html>
